<template>
	<view class="waterfall">
		<!-- <view class="ul" v-for="(list, idx) in list" :key='idx'> -->
		<view @click="proUrl(item.productsource,item.productid,item)" class="item" v-for="(item, index) in list" :key='index'
		 :style='{ marginTop: space + "px"}'>
			<image class="cover" :src="item.originalimg" lazy-load="true"></image>
			<view class="item_box">
				<view class="title">
					{{item.productname}}
				</view>
				<view class="color coupon" v-if="item.productsource!=6&&item.couponinfo&&item.couponinfo!='无可用优惠券'">
					<text>{{item.couponinfo}}</text>
				</view>
				<view class="foot">
					<view class="color">
						<view v-if="item.productsource==6||item.producttype==6" class="timeBear">
							<image src="https://wx.hnlxyj.com/web/v2.0/static/image/caption/capital_icon1.png" mode="widthFix"></image>
							<text>{{item.productmminmoney}}</text>
						</view>
						<view v-else>
							<text class="volumePrice" v-if="item.volumePrice">券后价</text>
							<text style="font-size: 30rpx;">￥{{item.volumePrice?item.volumePrice:item.productmminmoney}}</text>
							<text class="del" v-if="item.agoramoney">￥{{item.agoramoney}}</text>
						</view>
						
						
					</view>
					<text class="sales">销量 {{item.monthSales||item.sumsalecount||0}}</text>
				</view>
				
			</view>
		</view>
		<!-- </view> -->
		<view class="top" @tap="top">
			<image src="http://www.hnlxyj.com/wx2/static/top.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: { // 页面列表数据
				type: Array,
				// default: []
			},
			column: {
				type: Number
			}, // 显示列数
			space: {
				type: Number
			}, // 图片间间隔
		},
		onLoad() {
		},
		data() {
			return {
				text:["","淘宝","","京东","","乐驿享","","拼多多"],
				dataList: [],
				totalHeight: [],
				itemWidth: 0,
			};
		},
		watch: {
			list: {
				deep: true,
				handler(newList, oldList) {
					this.dataList = [];
					// if (newList.length === 0) {
					//   this.dataList = []
					//   this.totalHeight = []
					//   return
					// }
					let dataList = []
					let totalHeight = []
					this.column = this.column < 2 ? 2 : this.column
					let itemWidth = parseInt((uni.getSystemInfoSync().windowWidth - (this.column + 1) * this.space) / this.column)
					if (this.dataList.length === 0) {
						for (let i = 0; i < this.column; i++) {
							dataList.push([])
						}
						totalHeight = new Array(this.column).fill(0)
					} else {
						dataList = JSON.parse(JSON.stringify(this.dataList))
						totalHeight = JSON.parse(JSON.stringify(this.totalHeight))
					}
					let nList = newList.filter(newItem => {
						let b = true
						oldList.forEach(oldItem => {
							if (newItem.url === oldItem) {
								b = false
							}
						})
						return b
					})
					nList.forEach(item => {
						let minIndex = this.getMinIndex(totalHeight)
						totalHeight[minIndex] += parseInt(1 * (itemWidth / 1))
						dataList[minIndex].push(item)
					})
					this.dataList = dataList;
					this.totalHeight = totalHeight
					this.itemWidth = itemWidth
				}
			}
		},
		methods: {
			top(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			proUrl(productsource, id,item) {
				uni.navigateTo({
					url: "/pages/aduit/product?proId=" + id
				})
			},
			getMinIndex(totalHeight) {
				let minIndex = 0
				let minValue = totalHeight[0]
				for (let i = 0; i < totalHeight.length; i++) {
					if (totalHeight[i] < minValue) {
						minIndex = i
					}
				}
				return minIndex
			}
		}

	}
</script>

<style lang="scss" scoped>
	
	.waterfall {
		padding-bottom:20rpx;
		.timeBear {
			display: inline-block;

			image {
				width: 28rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}
		}

		.top {
			position: fixed;
			bottom: 120rpx;
			z-index: 1000000;
			right: 20rpx;
			background: #fff;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			image {
				width: 64rpx;
			}
		}
		
		.time_item{
			position: absolute;
			bottom:100rpx;
			left:0;
			&.two{
				bottom:50rpx;
			}
		}
		
		.bage{
			position: absolute;
			width:48rpx;
			top:20rpx;
			left:20rpx;
		}
		
		// .ul {
		// 	display: inline-block;
		// 	vertical-align: top;
			
		// }
		.item {
			position: relative;
			padding: 20rpx;
			
			.title {
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				text{
					background: #ee3535;
					color: #fff;
					padding: 0 10rpx;
					border-radius: 10rpx;
					margin-right: 6rpx;
				}
			}
			background: #fff;
			border-radius: 10rpx;
			.item_box {
				display: inline-block;
				font-size: 28rpx;
				height: 260rpx;
				width:420rpx;
				margin-left: 20rpx;
				position: absolute;
				.color {
					display: inline-block;
					color: $font-color-theme;
					font-size: 24rpx;
					text{
						vertical-align: middle;
					}
				}
				.del {
					color: #999;
					font-size: 22rpx;
					text-decoration: line-through;
				}
			}
			.cover {
				width:260rpx;
				vertical-align: top;
				border-radius: 10rpx;
				height:260rpx;
				display: inline-block;
			}
		}
				
		.coupon {
			margin:10rpx 0;
			height: 36rpx;
			line-height:1;
			left:0;
			font-size: 20rpx;
			border-radius: 30rpx;
			padding:0 10rpx;
			border:1px solid $font-color-theme;
			position: absolute;
			bottom: 0;
			margin-bottom: 50upx;
		}
		
		.commission{
			margin: 10rpx 0;
			position: absolute;
			bottom: 40rpx;
			left:0;
			height: 36rpx;
			line-height: 1.5;
			border:1px solid $font-color-theme;
			padding: 0 10rpx;
			border-radius: 30rpx;
			
		}
		.foot{
			position: absolute;
			bottom: 0;
			left:0;
			width: 420rpx;
			.sales{
				padding: 0 10rpx;
				color:#999;
				font-size: 22rpx;
				border-radius: 5rpx;
				margin-top: 10rpx;
				float: right;
				display: inline-block;
			}
			.volumePrice{
				display: inline-block;
				height: 36rpx;
				font-size: 24rpx;
				background:$font-color-theme;
				color:#fff;
				border-radius: 10rpx;
				text-align: center;
				padding: 0 10rpx;
				vertical-align: middle;
			}
		}
		
	}
</style>
